<template>
 <!-- 面访填写回访内容 -->
 <view>
  <!-- 表单 -->
  <view class="form">
   <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="auto">
    <view class="form-bottom">
     <u-form-item label="居住环境" borderBottom @click="showLiving= true; " ref="item1" prop="live">
      <u--input v-model="form.live" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
      </u--input>
      <u-icon slot="right" name="arrow-right"></u-icon>
     </u-form-item>
     <u-form-item label="个人卫生" borderBottom @click="showPersonal= true; " ref="item1" prop="hygiene">
      <u--input v-model="form.hygiene" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
      </u--input>
      <u-icon slot="right" name="arrow-right"></u-icon>
     </u-form-item>
     <u-form-item label="身体状况" borderBottom @click="showHealth= true; " ref="item1" prop="body">
      <u--input v-model="form.body" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
      </u--input>
      <u-icon slot="right" name="arrow-right"></u-icon>
     </u-form-item>
     <u-form-item label="回访方式" borderBottom @click="showReturnvisit= true; " ref="item1" prop="type">
      <u--input v-model="form.type" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
      </u--input>
      <u-icon slot="right" name="arrow-right"></u-icon>
     </u-form-item>
     <u-form-item label="需求" borderBottom ref="item1" prop="need">
      <u--textarea v-model="form.need" placeholder="请填写需求" border="none" autoHeight prop="need">
      </u--textarea>
     </u-form-item>
    </view>
    <view class="upload">
     <u-form-item label="" borderBottom ref="item1" prop="upload">
      <!-- 凭证上传 -->
      <view class="VisitorInformation_list">
       <view class="">
        <view class="certificate">
         回访凭证
        </view>
        <view class="VisitorInformation_list_image">
         <u-upload :fileList="form.imgs" @afterRead="afterRead" @delete="deletePic" name="1" multiple
          :maxCount="10"></u-upload>
        </view>
        <view class="uploadtext">
         <text>请上传图片或本地视频，最多10张</text>
        </view>
       </view>
      </view>
     </u-form-item>
    </view>
   </u--form>

   <u-action-sheet :show="showLiving" :actions="actionsliving" title="请选择居住环境" @close="showLiving = false"
    @select="livingSelect">
   </u-action-sheet>
   <u-action-sheet :show="showHealth" :actions="actionshealth" title="请选择身体状况" @close="showHealth = false"
    @select="healthSelect">
   </u-action-sheet>
   <u-action-sheet :show="showPersonal" :actions="actionspersonal" title="请选择个人卫生" @close="showPersonal = false"
    @select="personalSelect">
   </u-action-sheet>
   <u-action-sheet :show="showReturnvisit" :actions="actionsReturnvisit" title="请选择回访方式"
    @close="showReturnvisit = false" @select="returnVisitSelect">
   </u-action-sheet>
  </view>

  <!-- 定位 -->
  <view class="positions">
   <view class="">
    <text>定位</text>
   </view>
   <view>
    <u-switch v-model="valueposition" @change="change" size="40"></u-switch>
   </view>
  </view>

  <view class="button">
   <u-button type="primary" shape="circle" @click="submit">提交</u-button>
  </view>
 </view>
</template>

<script>
	// import {
	// 	addvillagersRecord
	// } from '../../api/user.js'
	// import config from '@/api/config.js'
 export default {
  data() {
   return {
    showSex: false,
    showLiving: false,
    showHealth: false,
    showPersonal: false,
    showReturnvisit: false,
    valueposition: true,
    form: {
     name: '',
     sex: '',
     age: '',
     live: '',
     body: '',
     type:'',
     hygiene: '',
     returnVisit: '',
     // 地址
     address: '',
     // 需求
     need: '',
     // 其他
     other: '',
     // 图片上传
     imgs: [],
    },
    // 选择选性别
    actions: [{
      name: '男',
     },
     {
      name: '女',
     },

    ],
    actionsliving: [{
      name: '良好',
     },
     {
      name: '一般',
     },
     {
      name: '差',
     },
    ],
    actionshealth: [{
      name: '良好',
     },
     {
      name: '一般',
     },
     {
      name: '差',
     },
    ],
    actionspersonal: [{
      name: '良好',
     },
     {
      name: '一般',
     },
     {
      name: '差',
     },
    ],
    actionsReturnvisit: [{
      name: '电访维护',
     },
     {
      name: '面访维护',
     },
    ],
    rules: {
     'name': {
      type: 'string',
      required: true,
      message: '请填写姓名',
      trigger: ['blur', 'change']
     },
     'sex': {
      type: 'string',
      max: 1,
      required: true,
      message: '请选择男或女',
      trigger: ['blur', 'change']
     },
     'age': {
      type: 'string',
      required: true,
      message: '请输入年龄',
      trigger: ['blur', 'change']
     },
     'live': {
      type: 'string',
      required: true,
      message: '请选择居住环境',
      trigger: ['blur', 'change']
     },
     'body': {
      type: 'string',
      required: true,
      message: '请选择身体状况',
      trigger: ['blur', 'change']
     },
     'hygiene': {
      type: 'string',
      required: true,
      message: '请选择个人卫生',
      trigger: ['blur', 'change']
     },
     'type': {
      type: 'string',
      required: true,
      message: '请选择回访方式',
      trigger: ['blur', 'change']
     },
     'need': {
      type: 'string',
      required: true,
      message: '请填写需求',
      trigger: ['blur', 'change']
     },
     'upload': {
      type: 'string',
      required: true,
      min: 1,
      message: '请上传图片',
      trigger: ['blur', 'change']
     },
    },
   }
  },
  methods: {
   
   // 选择性别
   sexSelect(e) {
    this.form.sex = e.value
   },
   livingSelect(e) {
    this.form.live = e.value
   },
   healthSelect(e) {
    this.form.body = e.value
   },
   personalSelect(e) {
    this.form.hygiene = e.value
   },
   returnVisitSelect(e) {
    this.form.returnVisit = e.value
   },
   // 定位开关
   change() {
   },
   // 图片上传部分
   // 删除图片
   deletePic(event) {
    this[`fileList${event.name}`].splice(event.index, 1)
   },
   // 新增图片
   async afterRead(event) {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file)
    let fileListLen = this[`fileList${event.name}`].length
    lists.map((item) => {
     this[`fileList${event.name}`].push({
      ...item,
      status: 'uploading',
      message: '上传中'
     })
    })
    for (let i = 0; i < lists.length; i++) {
     const result = await this.uploadFilePromise(lists[i].url)
     let item = this[`fileList${event.name}`][fileListLen]
     this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
      status: 'success',
      message: '',
      url: result
     }))
     fileListLen++
    }
   },
   uploadFilePromise(url) {
    return new Promise((resolve, reject) => {
     let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
       user: 'test'
      },
      success: (res) => {
       setTimeout(() => {
        resolve(res.data.data)
       }, 1000)
      }
     });
    })
   },
   // 提交表单
   submit() {
    this.$refs.uForm.validate().then(res => {
     
     uni.$u.toast('校验通过')
    }).catch(errors => {
     uni.$u.toast('校验失败')
    })
   }
  }
 }
</script>
<style lang="scss">
 page {
  background-color: #EFF1F5;
 }
</style>

<style lang="scss" scoped>
 .visitor {
  margin: 15px;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
 }

 .visitors {
  margin: 15px -10px;
  padding: 0px 15px;
  background-color: #EFF1F5;
 }

 .form {
  margin: 15px;

  .form-top {
   background-color: #fff;
   border-radius: 10px;
   padding: 10px;
  }

  .form-bottom {
   background-color: #fff;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding: 10px;
  }
 }


 .VisitorInformation_list {
  background-color: #FFFFFF;
  padding: 0px 15px 15px 15px;

  // display: flex;
  color: #666;
  // justify-content: space-between;

  ._select {
   display: flex;
   color: #AAAAAA;
   font-size: 15px;

   view {
    margin-right: 3px;
   }
  }

  .VisitorInformation_list_image {
   margin: 15px 0 0 0;
   display: inline-block;
   padding-right: 10px;
  }

 }

 .upload {
  background-color: #FFFFFF;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: none;
 }

 .uploadtext {
  color: #CCCCCC;
  font-size: 13px;
 }

 .positions {
  display: flex;
  justify-content: space-between;
  background-color: #FFFFFF;
  margin: 15px;
  padding: 10px;
  border-radius: 10px;
  color: #666666;
  font-size: 15px;

  view:last-child {
   padding-top: 3px;
  }
 }

 .button {
  margin: 15px;

  .u-button {
   background-color: #0C68FD;
  }
 }
</style>
